<template>
	<view class="content">
		<nav-bar fontColor="#FFFFFF" title="新建账户"></nav-bar>
		<view class="row b-b">
			<text class="tit">银行卡号</text>
			<input class="input" type="text" v-model="address.name" placeholder="请输入银行卡号"
				placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">开户行</text>
			<input class="input" type="number" v-model="address.code" placeholder="请输入开户行"
				placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">开户人姓名</text>
			<input class="input" type="number" v-model="address.address" placeholder="请输入开户人姓名"
				placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">手机号</text>
			<input class="input" type="number" v-model="address.phone" placeholder="请输入手机号"
				placeholder-class="placeholder" />
		</view>
		<!-- <view class="row b-b">
			<text class="tit">开户行及账号</text>
			<input class="input" type="number" v-model="address.account" placeholder="请输入开户行及账号"
				placeholder-class="placeholder" />
		</view> -->
		<!-- <view class="row b-b">
			<text class="tit">省市区</text>
			<pick-regions :defaultRegion="defaultRegion" @getRegion="handleGetRegion">
				<view style="height: 70rpx;border-radius: 4px;width: 100%;">
					<view v-if="!regionName"
						style="color: #cecece;font-size: 30rpx;line-height: 70rpx;margin-left: 20rpx;">
						请选择城市
					</view>
					<view v-else style="color: #000000;font-size: 24rpx;line-height: 70rpx;margin-left: 20rpx;">
						{{regionName}}
					</view>
				</view>
			</pick-regions>
		</view> -->
		<!-- <view class="row b-b">
			<text class="tit">详细</text>
			<input class="input" type="text" v-model="address.address" placeholder="街道、楼号、门牌"
				placeholder-class="placeholder" />
		</view> -->
		<view class="row default-row">
			<text class="tit">设为默认</text>
			<switch :checked="address.isDefault" color="#fa436a" @change="handleIsDefaultChange" />
		</view>
		<button class="add-btn" type="primary" @click="handleSubmit">提交</button>
	</view>
</template>

<script>
	import pickRegions from '@/components/pick-regions/pick-regions.vue'

	export default {
		components: {
			pickRegions
		},
		data() {
			return {
				mapAddress: '', // 地图上的地址
				defaultRegion: ['广西壮族自治区', '柳州市', '柳南区'],
				region: [],
				address: {
					name:'',
					code:'',
					address:'',
					phone:'',
					account:'',
				},
				regionList: [],
				selectedRegion: [],
			}
		},
		watch: {
			selectedRegion(val, oldVal) {
				if (val != null) {
					this.address.province = val[0];
					this.address.city = val[1];
					this.address.district = val[2];
				} else {
					this.address.province = null
					this.address.city = null
					this.address.district = null
				}
			}
		},
		computed: {
			regionName() {
				// 转为字符串
				return this.region.map(item => item.name).join('/')
			}
		},
		onLoad(option) {
			let title = '新增收货地址';
			if (option.id) {
				title = '编辑收货地址'
				this.$api.order.userAddress.get(option.id).then(res => {
					this.address = res
					this.selectedRegion = [res.province, res.city, res.district]
					this.regionName = res.provinceName + ' ' + res.cityName + ' ' + res.districtName
				});
			}
			uni.setNavigationBarTitle({
				title
			})
		},
		methods: {
			handleGetRegion(region) {
				console.log(region.map(item => item.name).join('/'))
				// if(this.formData.pickupAddress == ''){
				// 	this.formData.pickupAddress = region.map(item => item.name).join('/')
				// }
				// this.stowageFormData.departureIdList = [];
				let idList = [];
				for (let i in region) {
					idList.push(region[i].code)
				}
				this.address.city = idList.join(',')
				console.log(this.address.city)
				this.region = region
				console.log(region)
			},
			openMap() {
				let that = this;
				uni.chooseLocation({
					success: function(res) {
						that.address.latitude = res.latitude;
						that.address.longitude = res.longitude;
						that.address.address = res.address + res.name;
						that.mapAddress = res.address + res.name;
					}
				});
			},
			handleRegionChange(res) {
				if (res) {
					this.regionName = res.detail.value[0] + ' ' + res.detail.value[1] + ' ' + res.detail.value[2];
					this.selectedRegion = [res.detail.code[0], res.detail.code[1], res.detail.code[2]];
					console.log(this.selectedRegion)
				}
			},
			handleIsDefaultChange(e) {
				console.log(e)
				this.address.isDefault = e.detail.value ? true : false
				console.log(this.address.isDefault)
			},
			// 提交
			handleSubmit() {
				if (!this.address.name) {
					vm.$u.toast('请填写收货人姓名');
					return;
				}
				if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(this.address.phone)) {
					vm.$u.toast('请输入正确的手机号码');
					return
				}
				if (!this.address.province) {
					vm.$u.toast('请选择省');
					return
				}
				if (!this.address.city) {
					vm.$u.toast('请选择市')
					return
				}
				if (!this.address.district) {
					vm.$u.toast('请选择区')
					return
				}
				if (!this.address.address) {
					vm.$u.toast('请输入详细地址');
					return
				}
				if (this.address.id) {
					this.$api.order.userAddress.edit(this.address).then(res => {
						vm.$u.toast(`保存成功`);
					})
				} else {
					this.$api.order.userAddress.add(this.address).then(res => {
						vm.$u.toast(`新增成功`);
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #EEEEEE;
		padding-top: 16upx;
	}

	.row {
		display: flex;
		align-items: center;
		position: relative;
		padding: 0 30upx;
		height: 110upx;
		background: #fff;
		border-bottom: 1px solid #eee;
		.tit {
			flex-shrink: 0;
			width: 220upx;
			font-size: 30upx;

		}

		.input {
			flex: 1;
			font-size: 30upx;

		}

		.icon-shouhuodizhi {
			font-size: 36upx;

		}
	}

	.default-row {
		margin-top: 16upx;

		.tit {
			flex: 1;
		}

		switch {
			transform: translateX(16upx) scale(.9);
		}
	}

	.add-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690upx;
		height: 80upx;
		margin: 60upx auto;
		color: #fff;
		border-radius: 10upx;
	}
</style>